<template>
  <div class="user-settings-info-view">
    <a-row :gutter="16" type="flex" justify="center">
      <a-col :md="{span: 24,order:2}" :lg="{span: 16,order:1}">
        <a-form :form="form" layout="vertical">
          <a-form-item label="用户名">
            <a-input
              v-decorator="['username', {
                initialValue: userInfo.username,
                rules: [{required: true, message: '请输入用户名'}]
              }]"/>
          </a-form-item>
          <a-form-item label="性别">
            <a-input
              v-decorator="['sex', {
                initialValue: userInfo.sex,
                rules: [{required: true, message: '请输入性别'}]
              }]"/>
          </a-form-item>
          <a-form-item label="年龄">
            <a-input
              v-decorator="['age', {
                initialValue: userInfo.age,
                rules: [{required: true, message: '请输入年龄'}]
              }]"/>
          </a-form-item>
          <a-form-item label="邮箱">
            <a-input
              v-decorator="['email', {
                initialValue: userInfo.email,
                rules: [{required: true, message: '请输入邮箱'}]
              }]"/>
          </a-form-item>
          <a-form-item>
            <a-button type="primary" @click="updateInfo">更新基本信息</a-button>
          </a-form-item>
        </a-form>
      </a-col>
      <a-col :md="{span: 24,order:1}" :lg="{span: 8,order:2}" >
        <div class="ant-upload-preview" @click="$refs.modal.edit()">
          <a-icon type="cloud-upload-o" class="upload-icon"/>
          <div class="mask"><a-icon type="plus"/></div>
          <img :src="`${imgBaseURL}${avatarUrl}`" onerror="this.src='https://picx.zhimg.com/v2-ab359844f29db089691acf237a99a6f3_xl.jpg';this.οnerrοr=null"/>
        </div>
      </a-col>
    </a-row>
    <avatar-modal ref="modal" @ok="setavatar" />
  </div>
</template>

<script>
import AvatarModal from './components/AvatarModal.vue'
import { editUser } from '@/api/userManage'
export default {
  name: 'BasicSetting',
  components: {
    AvatarModal
  },
  data () {
    return {
      imgBaseURL: `http://122.9.107.215:8080/common/download?fileName=`,
      avatarUrl: this.$store.getters.avatar,
      userInfo: this.$store.getters.userInfo,
      form: this.$form.createForm(this, { name: 'basic' })
    }
  },
  mounted () {

  },
  methods: {
    setavatar (res) {
      this.avatarUrl = res.data.fileName
      editUser({
        id: this.userInfo.id,
        avatar: res.data.fileName
      })
      .then(res => {
        this.$message.success('头像修改成功')
        location.reload()
      })
    },
    updateInfo () {
      this.form.validateFields((err, values) => {
        if (!err) {
          values['id'] = this.userInfo.id
          editUser(values)
          .then(res => {
            this.$message.success('信息修改成功')
            // 重新拉取用户信息
            this.$store.dispatch('GetInfo')
          })
          .catch(err => {
            this.$message.error(err.response.data.msg || '信息修改失败')
          })
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.user-settings-info-view {
  padding-top: 12px;
}
/deep/ .ant-form-item {
  margin-bottom: 14px;
}
.ant-upload-preview {
  position: relative;
  margin: 0 auto;
  width: 100%;
  max-width: 180px;
  border-radius: 50%;
  box-shadow: 0 0 4px #ccc;

  .upload-icon {
    position: absolute;
    top: 0;
    right: 10px;
    font-size: 1.4rem;
    padding: 0.5rem;
    background: rgba(222, 221, 221, 0.7);
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.2);
  }

  .mask {
    opacity: 0;
    position: absolute;
    background: rgba(0, 0, 0, 0.4);
    cursor: pointer;
    transition: opacity 0.4s;

    &:hover {
      opacity: 1;
    }

    i {
      font-size: 2rem;
      position: absolute;
      top: 50%;
      left: 50%;
      margin-left: -1rem;
      margin-top: -1rem;
      color: #d6d6d6;
    }
  }

  img,
  .mask {
    width: 100%;
    max-width: 180px;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
  }
}
</style>
